<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="http://www.mobiletrain.org/favicon.ico" type="image/x-icon" />
  <link rel="stylesheet" href="http://at.alicdn.com/t/font_2989423_g2bpxj3nqhk.css" />
  <link rel="stylesheet" href="./src/CSS/index.css">
  <title>🎸🎙🎷🎤千锋云音乐🎵</title>
</head>

<body>
  <!-- captcha -->
  <section class="captcha" style="visibility: hidden;">
    <h2>
      <span>行为验证码</span>
      <i class="iconfont icon-close"></i>
    </h2>
    <div class="check">
      <img src="./src/imgs/captcha.jpeg" alt="">
      <img src="./src/imgs/captcha_zfx.png" alt="">
    </div>
    <div class="drag">
      <div class="btn"></div>
    </div>
  </section>
  <!-- captcha -->

  <!-- login -->
  <section class="login" style="visibility: hidden;">
    <div class="item">
      <div class="menu"></div>
      <div class="form">
        <p class="close"><i class="iconfont icon-close"></i></p>
        <p class="font">登录/注册</p>
        <input type="text" class="mobile" placeholder="请输入手机号">
        <p class="msg"></p>
        <input type="text" class="password" placeholder="请输入验证码" maxlength="4">
        <p class="msg"></p>
        <button class="captcha">获取验证码</button>
        <button class="submit">登录/注册</button>
      </div>
    </div>
  </section>
  <!-- login -->

  <!-- backTop -->
  <img src="./src/imgs/goTop.png" class="backTop">
  <!-- backTop -->

  <!-- 头 -->
  <header>
    <section>
      <img class="logo" src="./src/logo.png" alt="logo">
      <ul class="navs">
        <li class="active"><a href="./index.html">首页</a></li>
        <li><a href="./song.html">歌单</a></li>
        <li><a href="./player.html">🎵音乐盒</a></li>
        <li><a href="./video.html">🎬小视频</a></li>
      </ul>

      <div class="member">
        <input type="text" placeholder="请输入歌名、歌词、歌手或专辑">
        <i class="iconfont icon-sousuo"></i>
        <!-- <img src="./src/imgs/avatar.webp" alt="avatar"> -->
        <div><span>登录</span> <span>/</span> <span>注册</span></div>
      </div>
    </section>
  </header>
  <!-- /头 -->

  <!-- 轮播图 -->
  <section class="swiper">
    <div class="swiper-wrapper">
      <!-- div.swiper-slide*6>img[src="./src/imgs/b$.jpeg"] -->
      <!-- <div class="swiper-slide" style="transform: translateX(-64px) scale(0.83); z-index: 1;"><img src="./src/imgs/b1.jpeg" alt=""></div>
            <div class="swiper-slide" style="transform: translateX(140px) scale(1); z-index: 2;"><img src="./src/imgs/b2.jpeg" alt=""></div>
            <div class="swiper-slide" style="transform: translateX(338px) scale(0.83); z-index: 1;"><img src="./src/imgs/b3.jpeg" alt=""></div>
            <div class="swiper-slide" style="transform: translateX(960px) scale(0.83); z-index: 1;"><img src="./src/imgs/b4.jpeg" alt=""></div>
            <div class="swiper-slide" style="transform: translateX(960px) scale(0.83); z-index: 1;"><img src="./src/imgs/b5.jpeg" alt=""></div>
            <div class="swiper-slide" style="transform: translateX(960px) scale(0.83); z-index: 1;"><img src="./src/imgs/b6.jpeg" alt=""></div> -->

      <div class="swiper-slide" style=""><img src="./src/imgs/b1.jpeg" alt=""></div>
      <div class="swiper-slide" style=""><img src="./src/imgs/b2.jpeg" alt=""></div>
      <div class="swiper-slide" style=""><img src="./src/imgs/b3.jpeg" alt=""></div>
      <div class="swiper-slide" style=""><img src="./src/imgs/b4.jpeg" alt=""></div>
      <div class="swiper-slide" style=""><img src="./src/imgs/b5.jpeg" alt=""></div>
      <div class="swiper-slide" style=""><img src="./src/imgs/b6.jpeg" alt=""></div>
    </div>
    <!-- 分页器 -->
    <div class="swiper-prev">←</div>
    <div class="swiper-next">→</div>
  </section>
  <!-- /轮播图 -->

  <!-- 主体 -->
  <section class="hot">
    <h1>🔥🔥🔥热门歌单(*^▽^*)</h1>
    <ul onclick="location.href='./src/player.html'" style="margin-left: 0px;">
      <li>
        <div><img src="./src/imgs/1.jpg" alt=""></div><span>【华语精选】奇迹，在爱与勇气的身后</span>
      </li>
      <li>
        <div><img src="./src/imgs/2.jpg" alt=""></div><span>初秋絮语，用音乐记下你的点点滴滴</span>
      </li>
      <li>
        <div><img src="./src/imgs/3.jpg" alt=""></div><span>【动漫】按头安利，补番必听</span>
      </li>
      <li>
        <div><img src="./src/imgs/4.jpg" alt=""></div><span>感恩节限定 | 感恩万物，感谢有你</span>
      </li>

      <li>
        <div><img src="./src/imgs/5.jpg" alt=""></div><span>回忆向 | 手划圈，时空逆转</span>
      </li>
      <li>
        <div><img src="./src/imgs/6.jpg" alt=""></div><span>我在他乡，挺好的</span>
      </li>
      <li>
        <div><img src="./src/imgs/7.jpg" alt=""></div><span>收藏起来，这些卡点音乐BGM超燃！</span>
      </li>
      <li>
        <div><img src="./src/imgs/8.jpg" alt=""></div><span>购物专用BGM，快来抄作业！</span>
      </li>

      <li>
        <div><img src="./src/imgs/1.jpg" alt=""></div><span>【华语精选】奇迹，在爱与勇气的身后</span>
      </li>
      <li>
        <div><img src="./src/imgs/2.jpg" alt=""></div><span>初秋絮语，用音乐记下你的点点滴滴</span>
      </li>
      <li>
        <div><img src="./src/imgs/3.jpg" alt=""></div><span>【动漫】按头安利，补番必听</span>
      </li>
      <li>
        <div><img src="./src/imgs/4.jpg" alt=""></div><span>感恩节限定 | 感恩万物，感谢有你</span>
      </li>
    </ul>
  </section>
  <!-- /主体 -->

  <!-- 底部 -->
  <footer>
    <p>
      Copyright 2018 © .TAIHE MUSIC GROUP.
    </p>
    <p>
    <div>
      <span>信息网络传播视听许可证: 11231223</span>
      |
      <span> 宁公网安备: 442234324309号</span>
      |
      <span>增值电信业务经营许可证: 宁B2-2012319</span>
      |
      <span>网络文化经营许可证号码: 宁网文[2021]0332-351号</span>
    </div>
    </p>
    <p>举报邮箱: zhaoxiaokang@1000phone.com</p>
  </footer>
  <!-- /底部 -->

  <script src="./src/js/login.js"></script>
  <script src="./src/js/swiper.js"></script>
  <script src="./src/js/hot.js"></script>
  <script src="./src/js/nprogress.js"></script>

</body>

</html>